import 'package:flutter/material.dart';
import 'package:mall/core/providers/pages/home/news_model.dart';
import 'package:mall/screens/home/news_item_page.dart';
import 'package:provider/provider.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../theme.dart';

class NewsPage extends StatefulWidget {
  static const routeName = '/NewsPage';

  @override
  _NewsPageState createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  final List<Widget> _pages = [
    NewsItemPage(linkType: 'NEWS', title: '新闻专栏'),
    NewsItemPage(linkType: 'ANNOUNCEMENT', title: '公告专栏'),
  ];

  PageController _pageController;
  int _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => NewsModel(),
      child: Scaffold(
        appBar: AppBar(
          title: _SearchEditWidget(),
          titleSpacing: 0,
          actions: <Widget>[
            _TabWidget(
              selectedIndex: _selectedIndex,
              onChanged: (index) {
                _pageController.jumpToPage(index);
              },
            ),
          ],
        ),
        body: PageView.builder(
          controller: _pageController,
          physics: NeverScrollableScrollPhysics(),
          onPageChanged: (value) {
            setState(() {
              _selectedIndex = value;
            });
          },
          itemBuilder: (context, index) {
            return _pages[index];
          },
          itemCount: _pages.length,
        ),
      ),
    );
  }
}

class _SearchEditWidget extends StatelessWidget {
  const _SearchEditWidget({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final outlineInputBorder = OutlineInputBorder(
      borderSide: BorderSide(color: kLineColor),
      borderRadius: BorderRadius.circular(15.w),
    );
    return Container(
      margin: EdgeInsets.all(8.w),
      height: 25.w,
      child: TextField(
        autofocus: false,
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.search, color: Colors.black),
          hintText: '搜索关键词',
          contentPadding: EdgeInsets.zero,
          focusedBorder: outlineInputBorder,
          enabledBorder: outlineInputBorder,
          border: outlineInputBorder,
          isDense: true,
        ),
        textInputAction: TextInputAction.search,
        onSubmitted: (value) => _onActionClicked(context, value),
      ),
    );
  }

  void _onActionClicked(BuildContext context, String value) {
    NewsModel model = Provider.of(context, listen: false);
    model.queryKey = value;
  }
}

class _TabWidget extends StatelessWidget {
  final int selectedIndex;
  final Function(int) onChanged;

  _TabWidget({
    Key key,
    @required this.selectedIndex,
    @required this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          _TabItemWidget(
            iconName: 'assets/images/home/ic_news.png',
            title: '新闻专栏',
            selected: selectedIndex == 0,
            onTap: () {
              onChanged(0);
            },
          ),
          _TabItemWidget(
            iconName: 'assets/images/home/ic_bulletin.png',
            title: '公告专栏',
            selected: selectedIndex == 1,
            onTap: () {
              onChanged(1);
            },
          ),
        ],
      ),
    );
  }
}

class _TabItemWidget extends StatelessWidget {
  final String iconName;
  final String title;
  final bool selected;
  final Function onTap;

  _TabItemWidget({
    Key key,
    @required this.iconName,
    @required this.title,
    @required this.selected,
    @required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 4),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              iconName,
              width: 16,
              height: 16,
              color: selected ? Theme.of(context).primaryColor : Colors.grey,
            ),
            Container(
              margin: EdgeInsets.only(top: 4),
              child: Text(
                title,
                style: TextStyle(
                  color: selected ? Theme.of(context).primaryColor : Colors.grey,
                  fontSize: 9,
                ),
              ),
            ),
          ],
        ),
      ),
      onTap: onTap,
    );
  }
}
